<template>
  <a-layout-content style="margin: 0 16px">
    <div :style="{ padding: '24px', background: '#fff', minHeight: '360px' }">
      <a-table :columns="columns" :data-source="data" bordered>
        <template #bodyCell="{ column, text, record }">
          <template v-if="column.dataIndex === 'name'">
            <span>{{ text }}</span>
          </template>
          <template v-else-if="column.dataIndex === 'action'">
            <a-tag color="#2db7f5" class="tag" @click="edit(record,'编辑')">编辑</a-tag>
            <a-tag color="red" class="tag" @click="delData(record)">删除</a-tag>
          </template>
        </template>
        <template #title>
          <a-button type="primary" @click="addUser('新增')">新增</a-button>
        </template>
      </a-table>
      
    </div>
  </a-layout-content>
  <a-modal
    v-model:open="open"
    :title="titleFlag == '编辑' ? '编辑' : '新增'"
    :ok-button-props="{ disabled: false }"
    :cancel-button-props="{ disabled: false }"
    @ok="handleOk(titleFlag)"
  >
    <a-form ref="addUserForm" :model="userForm" :rules="addUserRules">
      <a-form-item label="用户名" name="username" >
        <a-input v-model:value="userForm.username" />
      </a-form-item>
      <a-form-item label="账号" name="account">
        <a-input v-model:value="userForm.account" />
      </a-form-item>
      <a-form-item label="邮箱" name="email">
        <a-input v-model:value="userForm.email" />
      </a-form-item>
      <a-form-item label="电话" name="phone" type="number">
        <a-input v-model:value="userForm.phone" />
      </a-form-item>
      <a-form-item label="公司名称" name="company">
        <a-input v-model:value="userForm.company" />
      </a-form-item> 
    </a-form>
  </a-modal>
</template>

<script setup>
import { computed, reactive, ref } from "vue";
import { message } from 'ant-design-vue';

const userForm = reactive({
  key:null,
  username: "",
  account: "",
  email: "",
  phone: "",
  company: "",
})
const columns = [
  {
    title: "用户名",
    dataIndex: "username",
  },
  {
    title: "账号",
    className: "column-account",
    dataIndex: "account",
  },
  {
    title: "邮箱",
    dataIndex: "email",
  },
  {
    title: "电话",
    dataIndex: "phone",
  },
  {
    title: "公司名称",
    dataIndex: "company",
  },
  {
    title: "操作",
    dataIndex: "action",
  },
];

const data =reactive([
  {
    key: "1",
    username: "John Brown",
    account: "789456123",
    email: "New York No. 1 Lake Park",
    phone: "12345678911",
    company: "wangyi",
  },
  {
    key: "2",
    username: "Jim Green",
    account: "789456123",
    email: "London No. 1 Lake Park",
    phone: "12345678911",
    company: "baidu",
  },
  {
    key: "3",
    username: "Joe Black",
    account: "789456123",
    email: "Sidney No. 1 Lake Park",
    phone: "12345678911",
    company: "tengxun",
  },
])
// 表单验证规则
const addUserRules = {
  username: [{ required: true, message: "请输入用户名", trigger: "blur" }],
  account: [{ required: true, message: "请输入账号", trigger: "blur" }],
  email: [
    { required: true, message: "请输入邮箱", trigger: "blur" },
    {
      pattern: "^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(.[a-zA-Z0-9_-]+)+$",
      message: "不符合邮箱校验规则!",
      trigger: ['blur', 'change'],
    },
  ],
  phone: [
    { required: true, message: "请输入电话号码", trigger: "blur" },
    { 
      pattern: /^1[3456789]\d{9}$/,
      message: "请输入正确的手机号码",
      trigger: ['blur', 'change'],
    },
  ],
  company: [{ required: true, message: "请输入公司名称", trigger: "blur" }],
}
const addUserForm = ref(null);

const open = ref(false);
const titleFlag = ref('编辑')

// 编辑
const edit = (record, title) => {
  titleFlag.value = title
  open.value = true;
  userForm.key = record.key
  userForm.username = record.username
  userForm.account = record.account
  userForm.email = record.email
  userForm.phone = record.phone
  userForm.company = record.company
};
// 新增
const addUser = (title) => {
  titleFlag.value = title
  userForm.username = ''
  userForm.account = ''
  userForm.email = ''
  userForm.phone = ''
  userForm.company = ''
  open.value = true
}
const handleOk = async(flag) => {
  try {
    // 验证表单字段 
    const values = await addUserForm.value.validateFields(); 
    if(values ){
      const user = Object.assign({}, userForm, {key: (data.length + 1).toString()})
      if(flag == '新增'){
        data.push(user)
        message.success('添加成功');
      }else{
        const users = data.find(item => item.key === userForm.key)
        Object.assign(users, userForm)
        message.success('修改成功');
      }
      open.value = false;
    }
  } catch (errors) {}
};
const delData = (row) => {
  const index = data.findIndex(item => item.key=== row.key)
  if (index >= 0) {
    data.splice(index, 1)
    message.success('删除成功');
  }
}
const cleanForm = () => {

}
</script>

<style scoped lang="less">
.tag {
  cursor: pointer;
}
</style>
